<template>
  <div id="user-edit-dialog">
    <el-dialog
      :title="title"
      :visible="visible"
      width="80%"
      @update:visible="val => $emit('update:visible', val)"
    >
      <div>
        <el-form
          ref="userForm"
          :model="user"
          :rules="rules"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item prop="userface">
                <AvatarUploader v-model="user.userface" />
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="用户ID:"
                    prop="id"
                  >
                    <el-input
                      v-model="user.id"
                      size="mini"
                      style="width: 150px"
                      prefix-icon="el-icon-edit"
                      placeholder="用户ID"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="昵称:"
                    prop="name"
                  >
                    <el-input
                      v-model="user.name"
                      size="mini"
                      style="width: 150px"
                      prefix-icon="el-icon-edit"
                      placeholder="请输入昵称"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="姓名:"
                    prop="username"
                  >
                    <el-input
                      v-model="user.username"
                      size="mini"
                      style="width: 150px"
                      prefix-icon="el-icon-edit"
                      placeholder="请输入用户姓名"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="地址:"
                    prop="address"
                  >
                    <el-input
                      v-model="user.address"
                      size="mini"
                      style="width: 150px"
                      prefix-icon="el-icon-edit"
                      placeholder="请输入地址"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="是否锁定:"
                    prop="locked"
                  >
                    <el-switch
                      v-model="user.locked"
                      size="mini"
                      style="width: 150px"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="是否可用:"
                    prop="enable"
                  >
                    <el-switch
                      v-model="user.enable"
                      size="mini"
                      style="width: 150px"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="电话号码:"
                prop="phone"
              >
                <el-input
                  v-model="user.phone"
                  size="mini"
                  style="width: 150px"
                  prefix-icon="el-icon-phone"
                  placeholder="电话号码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="移动电话号码:"
                prop="telephone"
              >
                <el-input
                  v-model="user.telephone"
                  size="mini"
                  style="width: 150px"
                  prefix-icon="el-icon-phone"
                  placeholder="移动电话号码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="电子邮箱:"
                prop="email"
              >
                <el-input
                  v-model="user.email"
                  size="mini"
                  style="width: 150px"
                  prefix-icon="el-icon-message"
                  placeholder="请输入电子邮箱"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item
              label="备注:"
              prop="remark"
            >
              <el-input
                v-model="user.remark"
                type="textarea"
                :rows="2"
                placeholder="请输入备注信息"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="当前职业:"
                prop="profession"
              >
                <el-input
                  v-model="user.profession"
                  size="mini"
                  style="width: 150px"
                  prefix-icon="el-icon-edit"
                  placeholder="请输入职业名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="创建日期:"
                prop="first_time"
              >
                <el-date-picker
                  v-model="user.first_time"
                  size="mini"
                  type="datetime"
                  value-format="timestamp"
                  style="width: 150px;"
                  placeholder="创建日期"
                  default-time="12:00:00"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="最后登录:"
                prop="last_time"
              >
                <el-date-picker
                  v-model="user.last_time"
                  size="mini"
                  type="datetime"
                  value-format="timestamp"
                  style="width: 150px;"
                  placeholder="最后登录日期"
                  default-time="12:00:00"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="$emit('update:visible', false)">取 消</el-button>
        <el-button
          type="primary"
          @click="submitData"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import AvatarUploader from "./AvatarUploader";
  //import UserAPI from "@/api/UserAPI";
    export default {
        name: "UserEditDialog",
        components:{
            AvatarUploader
        },
        props:{
            title:{
                type:String,
                default:'编辑用户'
            },
            visible: {
                type:Boolean,
                default:false
            },
            model:{
              type:String,
              default:'add'
            },
            user:{
                type:Object,
                default: ()=>{
                    return {
                      address: "深圳南山",
                      authorities: [],
                      enable: true,
                      first_time: 1595619639000,
                      id: 1,
                      last_time: 1595619641000,
                      locked: false,
                      name: "系统管理员",
                      phone: "18568887789",
                      telephone: "029-82881234",
                      userface: "http://bpic.588ku.com/element_pic/01/40/00/64573ce2edc0728.jpg",
                      username: "admin",
                    }
                }
            }
        },
        data() {
            return {
                popVisible: false,
                rules: {
                    id: [{required: true, message: '请输入游戏ID', trigger: 'blur'}],
                    app_user_id: [{required: true, message: '请输入用户ID', trigger: 'blur'}],
                    nickname: [{required: true, message: '请输入用户昵称', trigger: 'blur'}],
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    sex: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
                    id_no: [{required: true, message: '请输入身份证号码', trigger: 'blur'}, {
                        pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                        message: '身份证号码格式不正确',
                        trigger: 'blur'
                    }],
                    coin:[{required: true, message: '请输入硬币数量', trigger: 'blur'}],
                    diamond:[{required: true, message: '请输入钻石数量', trigger: 'blur'}],
                    avatar_url:[{required: true, message: '请上传头像', trigger: 'blur'}],
                    first_time:[{required: true, message: '请选择创建时间', trigger: 'blur'}],
                    last_time:[{required: true, message: '请选择最后登录时间', trigger: 'blur'}],
                    email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'}, {
                        type: 'email',
                        message: '邮箱格式不正确',
                        trigger: 'blur'
                    }],
                    mobile_phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
                    profession:[{required: true, message: '请输入当前职业', trigger: 'blur'}],
                    id_type:[{required: true, message: '请输入证件号码', trigger: 'blur'}],
                    city_id:[{required: true, message: '请输入所在城市', trigger: 'blur'}],
                    city_name:[{required: true, message: '请输入所在城市', trigger: 'blur'}],
                    real_name_reg: [{required: true, message: '请进行实名认证', trigger: 'blur'}],
                    real_name_auth: [{required: true, message: '请进行实名认证', trigger: 'blur'}],
                    real_name_chk: [{required: true, message: '请进行实名认证', trigger: 'blur'}],
                    real_name_open: [{required: true, message: '请进行实名认证', trigger: 'blur'}],

                }
            }
        },
        mounted(){
            this.initData();
        },
        methods:{
            initData() {

            },
            submitData() {
              if(this.type==="add"){
                this.$refs['userForm'].validate(valid => {
                  if (valid) {
                    // UserAPI.putUser(this.user).then(resp => {
                    //   if (resp) {
                    //     this.$emit('update:visible', false)
                    //     this.$emit('submit')
                    //   }
                    // })
                  }
                });
              }else {
                this.$refs['userForm'].validate(valid => {
                    if (valid) {
                        // UserAPI.postUser(this.user).then(resp => {
                        //     if (resp) {
                        //         this.$emit('update:visible', false)
                        //         this.$emit('submit')
                        //     }
                        // })
                    }
                });
              }
            },
        }
    }
</script>

<style scoped>

</style>
